<template>
	<view>
		<totalMask :show.sync="isShow" :showType="showType">
			<view class="nvue-flex">
				<view class="report-title">
					<text class="title">举报</text>
				</view>
				
				<view class="report-content">
					<text class="reason-title">举报原因</text>
					
					<picker class="choose-reason" mode="selector" :range="reason_list" range-key="name" @change="onChooseReason">
						<block v-if="reason == ''">
							<view class="reason-bg">
								<text class="tips">请选择举报原因</text>
							</view>
						</block>
						
						<block v-else>
							<view class="reason-bg">
								<text class="reason">{{reason}}</text>
							
								<text class="rechoose">重选理由</text>
							</view>
						</block>
					</picker>
					
					<view class="report-desc-title">
						<text class="desc-title-a">举报描述</text>
						<!-- <text class="desc-title-b">(选填)</text> -->
					</view>
					
					<view class="desc-bg">
						<textarea class="desc" v-model="desc" placeholder="请指出相关内容便于平台判断违规情况" placeholder-class="place"></textarea>
					</view>
					
					<view class="pic-bg">
						<block v-for="(item, index) in imageList" :key="index">
							<view class="pic-item">
								<image class="pic-img" :src="item"></image>
								
								<image class="pic-delete" src="@/static/look/delete.png" @click="onDeletePic(index)"></image>
							</view>
						</block>
						
						<view class="upload" @click="onChooseImage" v-if="imageList.length < 3">
							<image class="upload-img" src="@/static/live/add.png"></image>
						</view>
					</view>
					
					<view class="sure" @click="onSure">
						<text class="sure-title">提交</text>
					</view>
				</view>
			</view>
		</totalMask>
	</view>
</template>

<script>
	import {
		reportType,
		uploadImage,
		reportRoom
	} from "@/api/newLive.js";
	import storage from "@/utils/storage";
	import st from "@/utils/showtoast.js";
	
	export default {
		data() {
			return {
				isShow: false,
				showType: 0,
				reason_list: [],
				reason: "", //原因
				desc: "", //描述
				reason_id: "", //举报原因的ID
				imageList: [], //图片数组
			}
		},
		destroyed() {
			uni.$off("YHShowReport")
		},
		mounted() {
			/**
			 * 展示举报
			 */
			uni.$on("YHShowReport", () => {
				this.isShow = true
				this.showType = 3
			});
			
			this.getReportTypeData()
		},
		methods: {
			/**
			 * 选择理由
			 */
			onChooseReason(e) {
				let index = e.detail.value
				this.reason = this.reason_list[index].name
				this.reason_id = this.reason_list[index].id
			},
			/**
			 * 选择图片
			 */
			onChooseImage() {
				uni.chooseImage({
					count: 3 - this.imageList.length,
					success: res => {
						this.uploadImageData(0, res.tempFilePaths)
					}
				})
			},
			/**
			 * 上传图片
			 */
			async uploadImageData(index, fileList) {
				let res = await uploadImage(fileList[index])
				
				this.imageList.push(res.data.fullurl)
				if (index < (fileList.length - 1)) {
					this.uploadImageData(index + 1, fileList)
				}
			},
			/**
			 * 删除图片
			 */
			onDeletePic(index) {
				this.imageList.splice(index, 1)
				this.$set(this.imageList)
			},
			/**
			 * 获取举报的类型
			 */
			async getReportTypeData() {
				let res = await reportType()
				this.reason_list = res.data
			},
			
			/**
			 * 确定举报
			 */
			async onSure() {
				if (this.reason_id == "") {
					st.show("请选择举报原因")
					return
				}
				if (this.desc == "") {
					st.show("请填写相关描述")
					return
				}
				let params = {
					room_id: storage.getLiveRoomInfo().id,
					content: this.desc,
					category_id: this.reason_id,
					images: this.imageList.join(",")
				}
				let res = await reportRoom(params)
				st.success("举报成功", () => {
					this.isShow = false
					this.reason = ""
					this.reason_id = ""
					this.desc = ""
					this.imageList = []
				})
			},
		}
	}
</script>

<style scoped>
	.report-title {
		width: 300rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.title {
		color: #191919;
		font-size: 32rpx;
	}
	.report-content {
		margin-top: 60rpx;
		width: 750rpx;
		padding: 0 30rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.reason-title {
		color: #888888;
		font-size: 24rpx;
	}
	.choose-reason {
		margin-top: 15rpx;
		overflow: hidden;
	}
	.reason-bg {
		width: 690rpx;
		height: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.tips {
		color: #888888;
		font-size: 28rpx;
	}
	.reason {
		flex: 1;
		color: #191919;
		font-size: 32rpx;
	}
	.rechoose {
		color: #8ACD97;
		font-size: 28rpx;
		margin-left: 20rpx;
	}
	.report-desc-title {
		margin-top: 30rpx;
		width: 690rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.desc-title-a {
		color: #888888;
		font-size: 24rpx;
	}
	.desc-title-b {
		margin-left: 15rpx;
		color: #B3B3B3;
		font-size: 24rpx;
	}
	.desc-bg {
		margin-top: 10rpx;
		width: 690rpx;
		height: 150rpx;
		padding: 25rpx;
		overflow: hidden;
		background-color: #F8F8F8;
		border-radius: 10rpx;
	}
	.desc {
		width: 640rpx;
		height: 100rpx;
		font-size: 26rpx;
		color: #191919;
	}
	
	.place {
		color: #B4B4B4;
		font-size: 26rpx;
	}
	
	.pic-bg {
		margin-top: 25rpx;
		width: 690rpx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.pic-item {
		width: 130rpx;
		height: 130rpx;
		position: relative;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		margin-right: 8rpx;
	}
	
	.pic-img {
		width: 130rpx;
		height: 130rpx;
	}
	.pic-delete {
		position: absolute;
		right: 0;
		top: 0;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		overflow: hidden;
		background-color: red;
	}
	
	
	.upload {
		width: 130rpx;
		height: 130rpx;
		border-radius: 10rpx;
		background-color: #F8F8F8;
		border: 2rpx solid #F3F3F3;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}
	.upload-img {
		width: 40rpx;
		height: 40rpx;
	}
	
	.sure {
		margin-top: 44rpx;
		width: 690rpx;
		height: 92rpx;
		margin-bottom: 60rpx;
		background: linear-gradient(to right, #4FB784, #A4D79F);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		overflow: hidden;
	}
	.sure-title {
		color: white;
		font-size: 34rpx;
	}
</style>